<template>
	<view class="categoryContainer">
		<view class="header">
			<view class="center">搜索商品</view>
		</view>
		<!-- 主体 -->
		<view class="main">
			<view class="mainLeft">
				<view class="leftItem" :class="{active:defaultIndex === index}" @click="defaultIndex = index" v-for="(category,index) in categoryList" :key="category.id">{{category.name}}</view>
			</view>
			<view class="mainRight">
				<scroll-view class="rightScroll" scroll-y="true" enable-flex>
					<view class="scrollItem">
						<image class="scrollImg" :src="currentCategory.imgUrl" mode=""></image>
						<view class="goodsList">
							<view class="goodsItem" v-for="(goods,index) in goodsList" :key="goods.id">
								<image class="itemImg" :src="goods.wapBannerUrl" mode=""></image>
								<text class="itemText">{{goods.name}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				defaultIndex:0
			};
		},
		mounted() {
			this.getCategoryList()
		},
		methods:{
			getCategoryList(){
				this.$store.dispatch('getCategoryList')
			}
		},
		computed:{
			...mapState({
				categoryList:state=>state.category.categoryList
			}),
			// 根据当前这一项的index计算出其对应显示的数据
			currentCategory(){
				return this.categoryList[this.defaultIndex] || {}
			},
			goodsList(){
				return this.currentCategory.subCateList || []
			}
		}
	}
</script>

<style lang="stylus">
	.categoryContainer
		height 100%
		.header
			height 80rpx
			display flex
			justify-content center
			align-items center
			border-bottom 2px solid red
			.center
				height 60rpx
				line-height 60rpx
				width 90%
				background-color #aaa
				text-align center
				font-size 28rpx
		.main
			display flex
			.mainLeft
				width 150rpx
				.leftItem
					width 100%
					height 80rpx
					line-height 80rpx
					text-align center
					font-size 28rpx
					box-sizing border-box
					&.active
						background-color #41A863
						border-bottom 2px solid red
			.mainRight
				flex 1
				border-left 2px solid red
				box-sizing border-box
				.rightScroll
					.scrollItem
						.scrollImg
							display block
							width 520rpx
							height 190rpx
							margin 20rpx auto
						.goodsList
							display flex
							flex-wrap wrap
							.goodsItem
								width 33.33333%
								text-align center
								.itemImg
									height 144rpx
									width 100%
								.itemText
									font-size 28rpx
			
</style>
